<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>天天生鲜-购物车</title>
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/main.css">
	</head>

	<body>
		<div id="app">
			<div class="header_con">
				<div class="header">
					<div class="welcome fl">欢迎来到天天生鲜!</div>

					<div class="fr">
						<div class="login_info fl" v-if="isLogin">
							欢迎您：<em>{{user.nickname}}</em>
							<span>&emsp;|&emsp;</span>
						</div>

						<div class="login_btn fl" v-if="!isLogin">
							<a href="/login.html">登录</a>
							<span>|</span>
							<a href="/register.html">注册</a>
						</div>

						<div class="user_link fl" v-else>
							<a href="/html/user_center.html">用户中心</a>
							<span>|</span>
							<a href="javascript:;" @click="logout">退出登录</a>
						</div>
					</div>
				</div>
			</div>

			<div class="search_bar clearfix">
				<a href="/" class="logo fl">
					<img src="/images/logo.png"  alt="" />
				</a>

				<div class="sub_page_name fl">|购物车</div>

				<div class="search_con fr">
					<input class="input_text fl" v-model="search" placeholder="搜索商品" />
					<input type="button" class="input_btn fr" value="搜索" @click="query" />
				</div>
			</div>

			<div class="total_count">全部商品<em>{{count}}</em>件</div>

			<ul class="cart_list_th clearfix">
				<li class="col01">商品名称</li>
				<li class="col02">商品单位</li>
				<li class="col03">商品价格</li>
				<li class="col04">数量</li>
				<li class="col05">小计</li>
				<li class="col06">操作</li>
			</ul>

			<ul class="cart_list_td clearfix" v-for="cart in carts">
				<li class="col01"><input type="checkbox" checked /></li>
				<li class="col02"><img :src="cart.product.imgUrl" alt="" /></li>
				<li class="col03">
					{{cart.product.name}}<br>
					<em>{{cart.product.price}}元/{{cart.product.unit}}</em>
				</li>
				<li class="col04">{{cart.product.unit}}</li>
				<li class="col05">{{cart.product.price}}元</li>
				<li class="col06">
					<div class="num_add">
						<a href="javascript:;" class="add fl">+</a>
						<input class="num_show fl" v-model="cart.quantity" />
						<a href="javascript:;" class="minus fl">-</a>
					</div>
				</li>
				<li class="col07">{{cart.money}}元</li>
				<li class="col08"><a href="javascript:;" @click="del(cart.id)">删除</a></li>
			</ul>

			<ul class="settlements">
				<li class="col01">
					<input type="checkbox" checked />
				</li>
				<li class="col02">全选</li>
				<li class="col03">合计(不含运费)：
					<span>¥</span><em>{{total}}</em><br>
					共计<b>{{count}}</b>件商品
				</li>

				<!--购物车数量不为0时显示-->
				<li class="col04" v-if="parseInt(count) !== 0">
					<a href="/html/place_order.html">去结算</a>
				</li>
			</ul>
		</div>

		<div class="footer">
			<div class="foot_link">
				<a href="javascript:;">关于我们</a>
				<span>|</span>
				<a href="javascript:;">联系我们</a>
				<span>|</span>
				<a href="javascript:;">招聘人才</a>
				<span>|</span>
				<a href="javascript:;">友情链接</a>
			</div>

			<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
			<p>电话：010-****888    京ICP备*******8号</p>
		</div>

		<script src="/js/axios.min.js"></script>
		<script src="/js/vue.js"></script>
		<script src="/js/cart.js"></script>
	</body>
</html>